<template>
	<view class="container">
		<!--slider-->
		<view class="slider-bg">
			<view class="slider-wrapper">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :autoplay="true">
							<swiper-item v-for="(v,k) in data.banner">
								<image :src="v.img" class="slide-image" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<!-- slider end-->
		<!-- column -->
		<view class="home-icon">
			<view class="section-home">
				<view class="flex-wrap ">
					<navigator url="../about/about" hover-class="none" class="categ-item">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/icon/column-1.png" class="categ-img" mode="widthFix"></image>
						<view class="categ-txt">走进丰拓</view>
					</navigator>
					<navigator url="../product/product" open-type="switchTab" hover-class="none" class="categ-item">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/icon/column-2.png" class="categ-img" mode="widthFix"></image>
						<view class="categ-txt">产品中心</view>
					</navigator>
					<navigator url="../case/case" hover-class="none" class="categ-item">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/icon/column-3.png" class="categ-img" mode="widthFix"></image>
						<view class="categ-txt">工程案例</view>
					</navigator>
					<navigator url="../news/news" hover-class="none" class="categ-item">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/icon/column-4.png" class="categ-img" mode="widthFix"></image>
						<view class="categ-txt">新闻资讯</view>
					</navigator>
					<navigator url="../setup/help" hover-class="none" class="categ-item">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/icon/column-6.png" class="categ-img" mode="widthFix"></image>
						<view class="categ-txt">帮助中心</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- column end-->
		<!-- service -->
		<view class="service-sec">
			<view class="flex-sb">
				<view class="service-bar">
					<navigator url="../booking/booking" open-type="switchTab" class="service-entry service-entry-lt" hover-class="none">
						<view class="flex-column">
							<view class="">
								<view>服务预约</view>
								<view class="service-entry-txt">专业团队 上门勘察</view>
							</view>
							<view class="mt10 tr">
							<image src="https://www.fzftjc.com/static/rs/itorder/applet/a00.png" class="service-left-img" mode="widthFix"></image></view>	
						</view>
					</navigator>
				</view>
				<view class="service-bar">
				<navigator url="../booking/booking" open-type="switchTab" class="service-entry service-entry-rtt" hover-class="none">
					<view class="flex-center">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/a01.png" class="service-entry-img" mode="widthFix"></image>
						<view class="uni-flex-item ml20">
							<view>家装防水</view>
							<view class="service-entry-txt">为千万家庭提供一站式基础建材服务</view>
						</view>
					</view>
				</navigator>
				<navigator url="../booking/booking" open-type="switchTab" class="service-entry service-entry-rtb mt10" hover-class="none">
					<view class="flex-center">
						<image src="https://www.fzftjc.com/static/rs/itorder/applet/a02.png" class="service-entry-img" mode="widthFix"></image>
						<view class="uni-flex-item ml20">
							<view>建筑工程防水</view>
							<view class="service-entry-txt">提供防水方案设计以及施工双包服务</view>
						</view>
					</view>
				</navigator>
			    </view>
			</view>
		</view>
		<!-- service end-->
		
		<!-- Case -->
		<view class="section-main">
			<view class="section-title">
				<view class="section-main-title fz18" @click="fff"><text>//</text>工程案例<text>//</text></view>
				<view class="section-sub-title fz10">ENGINEERING CASES</view>
			</view>
			<view class="flex-wrap">
				<navigator :url="'../case/case-show?case_id='+v.id" v-for="(v,k) in data.project"  hover-class="none" class="col-list-item">
					<view class="col-list-img">
						<image :src="v.thumb" mode="aspectFill"></image>
					</view>
					<view class="cell tc">
						<view class="col-list-title">{{v.title}}</view>
						<view class="c-gray fz12 ellipsis">{{v.position}}</view>
					</view>
				</navigator>
			</view>
			<view class="flex-center">
				<navigator url="../case/case" class="more-link" hover-class="none">查看更多案例<uni-icons type="forward" color="#f45905"
						size="16"></uni-icons>
				</navigator>
			</view>
		</view>
		<!-- Case end-->
		<!-- Fact -->
		<synthesize></synthesize>
		<!-- Fact end-->
		<!-- OUR SERVICES -->
		<view class="section-main">
			<view class="section-title">
				<view class="section-main-title fz18"><text>//</text>品质服务<text>//</text></view>
				<view class="section-sub-title fz10">OUR SERVICES</view>
			</view>
			<view class="ptb">
				<scroll-view class="slick-slider" scroll-x="true" scroll-left="0">
					<view class="slick-slider-item" v-for="(v,k) in data.our_service">
						<view class="single-box">
							<view class="part-img">
								<image :src="v.thumb" mode="widthFix"></image>
							</view>

							<view class="part-txt">
								<view class="fz16 bold">{{v.title}}</view>
								<view class="part-txt-p ellipsis-l2">{{v.description}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- OUR SERVICES end-->
		<!-- About -->
		<view class="section-main about-sec">
			<image src="https://www.fzftjc.com/static/rs/itorder/applet/bgcar.jpg" class="about-sec-bg"  mode="aspectFill">
			<view class="section-title">
				<view class="section-main-title fz18 about-cw"><text>//</text>关于我们<text>//</text></view>
				<view class="section-sub-title fz10">ABOUT US</view>
			</view>
			<view class="cell about-cw">
				<view class="tj" v-text="data.store.content">
					
				</view>
			</view>
			<view class="flex-center">
				<navigator url="../about/about" class="c-primary" hover-class="none">了解更多<uni-icons type="forward" color="#f45905"
						size="16"></uni-icons>
				</navigator>
			</view>
		</view>
		<!-- About end-->
		<!-- News -->
		<view class="section-main mb30">
			<view class="section-title">
				<view class="section-main-title fz18"><text>//</text>新闻资讯<text>//</text></view>
				<view class="section-sub-title fz10">NEWS INFORMATION</view>
			</view>
			<view class="cell">
				<navigator :url="'../news/news-show?news_id='+v.id" v-for="(v,k) in data.news" class="news-item" hover-class="none">
					<view class="uni-flex">
						<view class="news-item-img">
							<image :src="v.thumb" mode="aspectFill"></image>
						</view>
						<view class="news-item-desc uni-flex-item">
							<view class="bold ellipsis">{{v.title}}</view>
							<view class="c-gray fz12 ellipsis-l2">{{v.description}}</view>
							<text class="fz10 c-gray9">{{formatTime(v.inputtime,1)}}</text>
						</view>
					</view>
				</navigator>
			</view>
			<view class="flex-center">
				<navigator url="../news/news" class="more-link" hover-class="none">查看更多资讯<uni-icons type="forward" color="#f45905" size="16"></uni-icons>
				</navigator>
			</view>
		</view>
		<!-- News end-->
		<!-- Footer -->
		<relation></relation>
		<!-- Footer end-->
	</view>
</template>

<script>
	import relation from'../public/relation.vue';
	import synthesize from '../public/synthesize.vue';
	import base from '../../js/base.js';
	import app from '../../js/app.js';
	export default {
		components:{
			relation,synthesize
		},
		data() {
			return {
				phone: '114',
				data:{},
				//data
			}
		},
		onLoad() {
			let This = this;
			base.request({
				url:base.urltext('/itorder/home_port/index'),
				success:function(res){
					if(res.data.success>0)
					{
						This.data = res.data;	
					}
					
				}
			});
		},
		methods: {
            makePhoneCall: function () {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			formatTime:function(e,b=1){
				return base.formatTime(e,b);
			},
		}
	}
</script>

<style>
	.slider-bg{margin-bottom:-30rpx;overflow:hidden}
	.swiper{height:375rpx}
	.slider-wrapper{position:relative;overflow:hidden}
	.slide-image{width:100%;height:375rpx}
	.home-icon{padding:0 20rpx}
	.section-home{overflow:hidden;position:relative;margin:0 auto 0px;border-radius:20rpx;padding:30rpx 20rpx 20rpx;background-color:#FFFFFF;box-shadow:0 6rpx 12rpx 0 rgb(232,237,250,.5)}
	.categ-item{text-align:center;width:20%;margin-bottom:10rpx}
	.categ-img{height:68rpx;width:68rpx}
	.categ-txt{font-size:24rpx;margin-top:10rpx}
	.service-sec{padding:30rpx 20rpx}
	.service-bar{width:49%;}
	.service-entry{position:relative;padding:20rpx;border-radius:20rpx;border: 1rpx solid}
	.service-entry-lt{ height:292rpx; background-color: #f0fbff; border-color:#ddf3ff;}
	.service-entry-rtt{height:120rpx; background-color: #fcf8ed; border-color:#fff1d6;}
	.service-entry-rtb{height:120rpx; background-color: #f6f7fc; border-color:#f1f0fe;}
	.service-left-img{width:320rpx; height: auto;}
	.service-entry-img{width:80rpx;height:80rpx}
	.service-entry-txt{font-size:20rpx;color:#808291}
</style>
